Ext.form.MultiComboBox = Ext.extend(Ext.form.ComboBox, {
    defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},
    listClass: '',
    selectedClass: 'x-combo-selected',
    triggerClass : 'x-form-arrow-trigger',
    shadow:'sides',
    listAlign: 'tl-bl?',
    maxHeight: 300,
    triggerAction: 'query',
    minChars : 4,
    typeAhead: false,
    queryDelay: 500,
    pageSize: 0,
    selectOnFocus:false,
    queryParam: 'query',
    loadingText: 'Loading...',
    resizable: false,
    handleHeight : 8,
    editable: true,
    allQuery: '',
    mode: 'remote',
    minListWidth : 70,
    forceSelection:false,
    typeAheadDelay : 250,
    displaySeparator:';',
    valueSeparator:',',
    lazyInit : true,

    // private
    onRender : function(ct, position){
        Ext.form.ComboBox.superclass.onRender.call(this, ct, position);
        var disValue="";
        if(this.hiddenName){
            this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id: (this.hiddenId||this.hiddenName)},
                    'before', true);
 
            
          var hvalue=this.hiddenValue !== undefined ? this.hiddenValue :
                this.value !== undefined ? this.value : '';
          var hvalueArray=hvalue.split(this.valueSeparator);
          
          for(var i=0;i<this.store.data.length;i++){
            	 var r = this.store.getAt(i);   
            	 var newValue = r.data[this.displayField];
            	  var v=r.data[this.valueField];
            	  for(var j=0;j<hvalueArray.length;j++){
            	  	if(hvalueArray[j]==v){
            	  		disValue+=newValue+this.displaySeparator;
            	  	}
            	  }
            	 
          }   
          
      
	        this.hiddenField.value =this.hiddenValue !== undefined ? this.hiddenValue :
	            this.value !== undefined ? this.value : '';
	        this.el.dom.removeAttribute('name');
        }
        if(Ext.isGecko){
            this.el.dom.setAttribute('autocomplete', 'off');
        }

        if(!this.lazyInit){
            this.initList();
        }else{
            this.on('focus', this.initList, this, {single: true});
        }

        if(!this.editable){
            this.editable = true;
            this.setEditable(false);
        }
        this.setValue(disValue);
    },

    initList : function(){
    	
        if(!this.list){
            if(!this.tpl){
                this.tpl = '<tpl for="."><div class="x-combo-list-item"><span class="unchecked" id="checkBox_{' + this.displayField + '}"+ width="20">&nbsp;&nbsp;&nbsp;&nbsp;</span>{' + this.displayField + '}</div></tpl>';
            }
        	Ext.form.MultiComboBox.superclass.initList.call(this);
         }

    },


    // private
    initEvents : function(){
        Ext.form.MultiComboBox.superclass.initEvents.call(this);
        this.keyNav["enter"]=function(e){
            this.onViewClick();
            //return true;
        };
    },

    // private
    fireKey : function(e){
        if(e.isNavKeyPress() && !this.list.isVisible()){
            this.fireEvent("specialkey", this, e);
        }
    },
    // private
    onSelect : function(record, index){
        if(this.fireEvent('beforeselect', this, record, index) !== false){
            var r = this.store.getAt(index);
            var newValue = r.data[this.displayField];
            var check=document.getElementById("checkBox_"+newValue);
            if(check.className=="checked"){
            	check.className="unchecked";
            }else{
            	check.className="checked";
            }
            var value=""; 
            var hiddenValue="";
            for(var i=0;i<this.store.data.length;i++){
            	 var r = this.store.getAt(i);   
            	 newValue = r.data[this.displayField];
            	 check=document.getElementById("checkBox_"+newValue);
            	 if(check.className=="checked"){
            	 	value+= r.data[this.displayField]+this.displaySeparator;
            	 	hiddenValue+= r.data[this.valueField]+this.valueSeparator;
            	 }
            }
            if(value.length>1){
            	value=value.substring(0,value.length-this.displaySeparator.length);
            }
            if(hiddenValue.length>1){
            	hiddenValue=hiddenValue.substring(0,hiddenValue.length-this.valueSeparator.length);
            }
            this.setValue(value);
            this.hiddenField.value=hiddenValue;
            this.fireEvent('select', this, record, index);
        }
    },
    
    
    
    setValue : function(v){
        var text = v;
        if(this.valueField){
            var r = this.findRecord(this.valueField, v);
            if(r){
                text = r.data[this.displayField];
            }else if(this.valueNotFoundText !== undefined){
                text = this.valueNotFoundText;
            }
        }
        this.lastSelectionText = text;
        Ext.form.ComboBox.superclass.setValue.call(this, text);
        this.value = v;
    },

    /**
     * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
     */
    expand : function(){
        if(this.isExpanded() || !this.hasFocus){
            return;
        }
        this.list.alignTo(this.wrap, this.listAlign);
        
        var hvalueArray=this.hiddenField.value.split(this.valueSeparator);
        for(var i=0;i<this.store.data.length;i++){
        	 var r = this.store.getAt(i);   
        	 var newValue = r.data[this.displayField];
        	  var v=r.data[this.valueField];
        	  for(var j=0;j<hvalueArray.length;j++){
        	  	if(hvalueArray[j]==v){
        	  		document.getElementById("checkBox_"+newValue).className="checked";
        	  	}
        	  }
        	 
        } 
        
        this.list.show();
        this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac
        Ext.getDoc().on('mousewheel', this.collapseIf, this);
        Ext.getDoc().on('mousedown', this.collapseIf, this);
        this.fireEvent('expand', this);
     }
});
Ext.reg('multicombo', Ext.form.MultiComboBox);